<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/page/comm/commtal.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<title>主页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-responsive.min.css" />
<link type="text/css" href="assets/ui/ui.all.css" rel="stylesheet" />
</head>
<body> 
<div class="container">
<br/>
<br/>
<br/>
	<!-- 右边的highchartdiv -->
	<div class="row">
         <div class="span12">
         	<span class="span3"><p class="muted" >app名称 : <strong class="text-error">机械 APP</strong></p></span>
			  <span class="span3"><p class="muted" >样式：<strong class="text-error">全部</strong></p></span>
			  <span class="span3"><p class="muted" >聚合平台：<strong class="text-error">黑格投资</strong></p></span>
			  
			  <span class="span6">
			 	 <span class="3">
					<a class="muted">  查询起始时间:</a>
				  </span>
			  		<input type="text" id="datepicker"  />
			  		<a class="btn btn-mini btn-info" onclick="reloadChart();">查询</a>
			  </span>
         </div>
         
		<div class="span12" style="margin-top: 15px;" >
			<!-- highchart -->
			<div  class="span12" id ="container">
			</div>
		</div>
		
		<div class="span12" style="margin-top: 15px;">
			  <span class="span2"><p class="text-warning">总点击量:${dcount}</p></span>
			  <span class="span2"><p class="text-success">总展现量:${gcount}</p></span>
			  <span class="span2"><p class="text-info">总展现量:${allmomey}元</p></span>
		</div>
	</div>
</div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/ui.core.js"></script>
<script type="text/javascript" src="assets/js/ui.datepicker.js"></script>
<script type="text/javascript" src="assets/js/ui.datepicker-zh-CN.js"></script>
<script src="assets/js/highcharts.js"></script>

<script>
function getChart(){
		var date =	[] ;   //X轴数据源
  		var val  =  [];    //点击量Y轴数据源
  		var vals =  [];    //展现率数据
  		var x= $("#datepicker").val();
  			  $.ajax({
   			  type:"POST",     
        	  url:"${pageContext.request.contextPath}/charts/chart.do",   
              dataType:'json',   
              data:{'date':x} ,
              async:false,      
   			  success:function(data){ 
   			   			if(data.dataXList !=  null ){
   			   					var length = data.dataXList.length;
   			   					
   			   					for(var i=0 ; i < length ; i++ ){
   			   						date.push(data.dataXList[i]);
   			   						val.push(data.dataYDList[i]);
   			   						vals.push(data.dataYGList[i]);
   			   					}
   			   			}else{
   			   			 		alert("没有数据！");
   			   			}
   			   		}
  			 });
  			 
  			 $('#container').highcharts({
		        title: {
		            text: '近一周收益数据',
		            x: -20 
		        },
	        	subtitle: {
	            	text: '',
	           		 x: -20
	       		 },
	        	xAxis: {
	            	categories: date//数据源
	       			 },
	        	yAxis: {
	           		 	title: {
	                	text: '次数'
	           		 },
	            plotLines: [{
		                value: 0,
		                width: 1,
		                color: '#808080'
	            	}]
	        },
		        tooltip: {
		            valueSuffix: '次'
		        },
		        legend: {
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'middle',
		            borderWidth: 0
		        },
	        series: [{
	            name:'点击率',
	            data: val
	        	},
	        	{
	            name: ' ',
	            data: []
	        	},
	        	{
	        	 name: '展现率',
	            data: vals
	        	}
	        ]//数据源
	    });
}

function reloadChart(){
  		var x= $("#datepicker").val();
  		if(x.length<=0){
  		 	alert("请选择日期！");
  		}else{
  			getChart();
  		}
}

		$(function () {
			getChart();
			
			$("#datepicker").datepicker({
			closeText: 'X',
			altField: '#actualDate',
			altFormat: 'yyyy-mm-dd',
			showButtonPanel: true,
			showClearButton:true,minDate: new Date(2009,7,10)
			});
		});
	</script>
</html>